/*
 * 创建活动
 * @Author: zfx
 * @Date: 2018-07-23 16:00:07
 */
<style lang='less' rel="stylesheet/less" type="text/less">
    .v-admin-activity-create {
		min-height: 600px;
		.activity-form {
            width: 380px;
		}
		.ivu-form-item {
			margin-bottom: 25px;
		}
    }
</style>
<template>
	<div class="v-admin-activity-create">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="110"
					class="activity-form"
					name="create-form">

					<Form-item
						:label="$t('activity.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('activity.please_enter_the_activity_name')"
							name="create-name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('activity.url')"
						prop="url">
						<i-input
							v-model="formValidate.url"
							:placeholder="$t('activity.please_enter_the_address_of_the_activity')"
							name="create-url"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('activity.photo')"
						prop="thumb">
						<Uploader
							ref="uploader"
							@on-remove="handleRemove"
							@on-change="handleChange">
							{{ $t('activity.image_format') }}
						</Uploader>
					</Form-item>

					<Form-item
						:label="$t('activity.start_time')"
						prop="started_time">
						<DatePicker
							v-model="formValidate.started_time"
							:style="{width : '260px'}"
							:placeholder="$t('activity.please_select_StartDate')"
							type="datetime"
							placement="top"
							name="create-started_time"
							@on-change="changeStartedDate"/>
					</Form-item>

					<Form-item
						:label="$t('activity.end_time')"
						prop="ended_time">
						<DatePicker
							v-model="formValidate.ended_time"
							:style="{width : '260px'}"
							:placeholder="$t('activity.please_select_EndDate')"
							type="datetime"
							placement="top"
							name="create-ended_time"
							@on-change="changeEndDate"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>

						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>

					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

import { validateImage } from 'src/validate'; // 引入校验文件
import Uploader from 'src/views/component/Uploader';

export default {

	name: 'ActivityCreate',

	components: {
		Uploader,
	},

	data() {
		return {
			formValidate: {
				name: '', // 活动名称
				thumb: '', // 活动图片
				url: '', // 活动首页地址
				started_time: '', // 开始日期
				ended_time: '', // 结束日期

			}, // 新建活动时的表单

			real_StartDate: '', // 格式化后的开始时间

			real_EndDate: '', // 格式化后的结束时间

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('activity.name') }),
						trigger: 'blur,change',
					},
				],
				url: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('activity.url') }),
						trigger: 'blur,change',
					},
				],
				started_time: [

					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('activity.start_time') }),
						trigger: 'blur,change',
					},

				],
				ended_time: [

					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('activity.end_time') }),
						trigger: 'blur,change',
					},

				],
				thumb: [
					{
						required: true,
						validator: validateImage,
						trigger: 'blur,change',
					},
				],
			},

		};
	},

	methods: {
		/**
		 * 删除图片
		 * @return {undefined}
		 */
		handleRemove() {
			this.formValidate.thumb = null;
			this.$refs.formValidate.validateField('thumb');
		},

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @return {undefined}
		 */
		handleChange({ file }) {
			this.formValidate.thumb = file;
			this.$refs.formValidate.validateField('thumb');
		},

		/**
         * 开始时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeStartedDate(date) {
			this.real_SatrtDate = date;
		},

		/**
         * 结束时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeEndDate(date) {
			this.real_EndDate = date;
		},

		/**
         * 提交表单
         * @param  {string} name {表单上对应的ref值}
         * @return {undefined}
         */
		handleSubmit(name) {
			if (this.loading) return;
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.formDataCreate();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单上对应的ref值}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs.uploader.reset();
			this.$refs[name].resetFields();

			this.formValidate.thumb = '';
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
         */
		formDataCreate() {
			const new_object = {

				name: this.formValidate.name,
				activity_picture: this.formValidate.thumb,
				activity_url: this.formValidate.url,
				started_at: this.real_SatrtDate,
				ended_at: this.real_EndDate,

			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			this.$emit('post', form_data);
		},
	},
};

</script>
